<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长内容省略</title>
    <style>

        p{
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 50px;
        }

        p:hover {
            word-break: break-all;
        }

        div {
            position: relative;
        }
        div:hover::after {
            content: attr(data-title);    /*取到data-title属性的值*/
            display: inline-block;
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 5px;
            position: absolute;
            top: -20px;
            left: 500px;
        }

    </style>
</head>
<body>
<p data-title="新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮"><strong>商品名称：</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p>
<div data-title="新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮">新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</div>
<span>asddsdsadsd</span>
</body>
</html>